<template>
  <ul class="bg-emerald-50 rounded-3xl p-2 sm:p-5 xl:p-6">
    <li v-for="(item, index) of items" :key="item[keyProp]">
      <div
        class="grid gap-1 items-start relative rounded-xl p-3 overflow-hidden sm:p-5 lg:grid-cols-8 xl:(grid-cols-9 p-6) hover:bg-white"
      >
        <h3
          class="font-semibold text-3xl text-neutral mb-1 ml-9 lg:(col-start-3 col-span-6 ml-0) xl:col-span-7"
        >
          <slot name="title" :item="item">
            <span v-if="titleProp">{{ item[titleProp] }}</span>
          </slot>
        </h3>
        <time
          :datetime="item[timeProp]"
          class="row-start-1 flex items-center font-medium mb-1 lg:(col-start-1 col-span-2 row-end-6 mb-0)"
        >
          <svg
            viewBox="0 0 12 12"
            class="w-3 h-3 mr-6 overflow-visible"
            :class="[svgColor(item)]"
          >
            <path
              v-if="index != 0"
              d="M 6 -6 V -60"
              fill="none"
              stroke-width="2"
              stroke="currentColor"
              class="text-gray-200"
            />
            <circle cx="6" cy="6" r="6" fill="currentColor" />
            <circle
              cx="6"
              cy="6"
              r="11"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            />
            <path
              v-if="index < items.length - 1"
              d="M 6 18 V 500"
              fill="none"
              stroke-width="2"
              stroke="currentColor"
              class="text-gray-200"
            />
          </svg>
          <slot name="time" :item="item">
            <div class="md:pr-4 truncate">{{ item[timeProp] }}</div>
          </slot>
        </time>
        <div class="ml-9 lg:(ml-0 col-start-3 col-span-6) xl:col-span-7">
          <slot :item="item"></slot>
        </div>
      </div>
    </li>
  </ul>
</template>
<script lang="ts">
import { isString } from "./utils";
import { defineComponent, PropType } from "vue";

export default defineComponent({
  props: {
    items: {
      type: Array as PropType<Array<any>>,
      default: [],
    },
    keyProp: {
      type: String,
      default: "id",
    },
    titleProp: String,
    timeProp: {
      type: String,
      required: true,
    },
    color: {
      type: [String, Function],
      default: "text-emerald-500",
    },
  },
  setup(props) {
    const svgColor = (item: any): string =>
      isString(props.color) ? props.color : props.color(item);
    return {
      svgColor,
    };
  },
});
</script>
